<template>
    <div>
        <el-card>
            <el-page-header content="新闻类别" icon="" title="新闻管理"></el-page-header>
            <el-table :data="tableData" height='600px' style="width: 100%">
                <el-table-column  prop="title" label="标题" width="200"/>
                <el-table-column  prop="cover" label="封面" width="150">
                    <template  #default="scope">
                        <img class="the_img" :src="scope.row.cover?scope.row.cover:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="分类">
                    <template #default="scope">
                        {{ categoryFormat(scope.row.category) }}
                    </template>
                </el-table-column>
                <el-table-column prop="editTime" label="更新时间" >
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="是否发布">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isPublish" 
                        active-color="#13ce66" 
                        :active-value="1" :inactive-value="0"
                        @change="handleSwitchChange(scope.row)"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small"
                        type="success"  
                        @click="handlePreview(scope.row)"
                        circle :icon="Star"
                        ></el-button>
                        <el-button size="small"  
                        @click="handleEdit(scope.row)"
                        circle :icon="Edit"
                        ></el-button>
                        <el-popconfirm title="你确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small"  
                                type=danger
                                circle :icon="Delete"
                                ></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
        title="预览新闻"
        v-model="dialogVisible"
        width="50%"
        >
        <div>
            <h2>{{ previewData.title }}</h2>
            <div style="font-size:12px;color:gray">{{ formatTime.getTime(previewData.editTime) }}</div>
            <el-divider>
                <el-icon>
                    <StarFilled/>
                </el-icon>
            </el-divider>
            <div v-html="previewData.content" class="htmlcontent"></div>
        </div>
        </el-dialog>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getNewAPI,changeNewSwitchAPI,deleteNewAPI} from '@/api'
import formatTime from '@/until/formatTime'
import {Star,Edit,Delete,StarFilled} from '@element-plus/icons-vue';
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'

const router=useRouter()
// const tableData=ref([])
const previewData=ref({})
const tableData=ref([])
const dialogVisible=ref(false)
onMounted(()=>{
    getTableData()
})
const getTableData=async()=>{
    const {data:res}=await getNewAPI()
    tableData.value=res.data.new
}
// 格式化分类信息
const categoryFormat=(category)=>{
    const arr=["最新动态","典型案例","通知公告"]
    return arr[category-1]
}
// 开关回调
const  handleSwitchChange=async (row)=>{
    // console.log("开关",row.id,row.isPublish);
    const {data:res}=await changeNewSwitchAPI({id:row.id,isPublish:row.isPublish})
    // if(res.status===0) {
        if(res.status===0 && res.message==="发布成功"){
            return ElMessage.success('发布成功')
        }else{
            return ElMessage.error('发布失败')
        }
}
// 预览新闻
const handlePreview=(data)=>{
    previewData.value=data
    dialogVisible.value=true
    console.log(previewData.value);
}
// 删除新闻
const handleDelete=async (item)=>{
    const {data:res}=await deleteNewAPI(item.id)
    if(res.status!==0 && res.message!=="删除成功"){
        ElMessage.error('删除失败')
    }else{
        ElMessage.success('删除成功')
        getTableData()
    }
}

// 编辑新闻
const handleEdit=(item)=>{
    router.push(`/news-manage/newsedit/${item.id}`)
}

</script>

<style lang="scss" scoped>

.el-table{
    margin-top:50px
}

.the_img{
    width: 50px;
    height: 50px;
}
</style>